<template>
  <div class="flex flex-col h-full">
    <!-- tab面板 -->
    <div
      class="flex-shrink-0 pl-3 pr-3 border-b-2 border-gray-100 border-solid bg-white"
    >
      <RouterTabs
        ref="routerTabsRef"
        :tab-metadata-arr="tabMetadataArr"
        :build-tab-name="buildTabName"
        @refresh="onRefresh"
        @close="onClose"
        @tab-click="onTabClick"
        @close-all="onCloseAll"
        @close-other="onCloseOther"
        @close-right="onCloseRight"
      ></RouterTabs>
    </div>
    <!-- tab内容 -->
    <div class="flex-1 h-0">
      <RouterViewKeepAliveWrapper
        ref="routerViewKeepAliveWrapperRef"
        :max="2"
      ></RouterViewKeepAliveWrapper>
    </div>
  </div>
</template>

<script setup>
import { useSystemMenuBreadcrumbTabStore } from '@/store/SystemMenuBreadcrumbTabStore'
import { storeToRefs } from 'pinia'
import RouterViewKeepAliveWrapper from './RouterViewKeepAliveWrapper.vue'
import RouterTabs from './RouterTabs.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { emitter } from '@/utils/Emitter'
import { refreshCur, closeCurAndToRoute } from './Events'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()
const $router = useRouter()

const systemMenuBreadcrumbTabStore = useSystemMenuBreadcrumbTabStore()
const { tabMetadataArr } = storeToRefs(systemMenuBreadcrumbTabStore)

const routerViewKeepAliveWrapperRef = ref()
const routerTabsRef = ref()
function onRefresh(dynCompName) {
  routerViewKeepAliveWrapperRef.value?.refresh(dynCompName)
}
function onClose(dynCompName, toPath) {
  routerViewKeepAliveWrapperRef.value?.removeKeepAliveCache(dynCompName)
  if (toPath) {
    // 暂时停用路由更新时，对from路由的keep-alive缓存控制
    routerViewKeepAliveWrapperRef.value?.doStopFromRouteKeepAliveConfigUpdateUntilNext()
    toRoutePath(toPath)
  }
}
function toRoutePath(path) {
  if (path) {
    $router.push(path)
  }
}
function onTabClick(dynCompName, toPath) {
  toRoutePath(toPath)
}

function onCloseAll(dynCompNameArr, toPath) {
  removeMutilKeepAliveCache(dynCompNameArr)
  if (toRoutePath) {
    // 暂时停用路由更新时，对from路由的keep-alive缓存控制
    routerViewKeepAliveWrapperRef.value?.doStopFromRouteKeepAliveConfigUpdateUntilNext()
    toRoutePath(toPath)
  }
}
function removeMutilKeepAliveCache(dynCompNameArr) {
  if (dynCompNameArr && dynCompNameArr.length > 0) {
    routerViewKeepAliveWrapperRef.value?.removeMutilKeepAliveCache(
      dynCompNameArr
    )
  }
}
function onCloseOther(
  dynCompName,
  isOperateActiveTab,
  closeAbleOpenedTabIndexArr,
  toPath
) {
  removeMutilKeepAliveCache(closeAbleOpenedTabIndexArr)
  if (!isOperateActiveTab && toPath) {
    routerViewKeepAliveWrapperRef.value?.doStopFromRouteKeepAliveConfigUpdateUntilNext()
  }
  toRoutePath(toPath)
}

function onCloseRight(activeIsClosed, closeAbleTabIndexArr, toPath) {
  removeMutilKeepAliveCache(closeAbleTabIndexArr)
  if (activeIsClosed && toPath) {
    routerViewKeepAliveWrapperRef.value?.doStopFromRouteKeepAliveConfigUpdateUntilNext()
  }
  toRoutePath(toPath)
}

emitter.on(refreshCur, () => {
  routerViewKeepAliveWrapperRef.value?.refreshCur()
})

emitter.on(closeCurAndToRoute, to => {
  routerTabsRef.value?.closeCurTab()
  routerViewKeepAliveWrapperRef.value?.removeCurKeepAliveCache()
  routerViewKeepAliveWrapperRef.value?.doStopFromRouteKeepAliveConfigUpdateUntilNext()
  $router.push(to)
})

function buildTabName(tab) {
  return t(tab.name)
}
</script>

<style lang="scss" scoped>
.test {
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}
</style>
